<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item">
						<view>进店引导视频</view>
						<view class="attachment-box flexWrapNo">
							<view class="attachment-img" v-if="video_url">
								<image :src="video_url+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,ar_auto'"></image>
								<image src="../../static/user/close.png" class="close-btn" @tap="deleteVideo"></image>
							</view>
							<view class="add-btn" @tap="chooseVideo()" v-if="!video_url"></view>
						</view>
						<view class="attachment-tips">备注:视频显示在乒个乓自助小程序路线图,仅支持MP4格式横屏视频，不超过50M</view>
					</view>
					<view class="info-item">
						<view>进店引导图</view>
						<view class="attachment-box flexWrapNo">
							<view  @tap="previewImage(item,imageList)" class="attachment-img" v-for="(item,index) in imageList">
								<image :src="item"></image>
								<image src="../../static/user/close.png" class="close-btn" @tap.stop="deleteImage(index)"></image>
							</view>
							<view class="add-btn" @tap="chooseImage()" v-if="imageList.length<3"></view>
						</view>
						<view class="attachment-tips">备注:图片显示在乒个乓自助小程序路线图，仅支持jpg、jpeg、png格式图片</view>
					</view>
					<view class="info-item">
						<view>公共交通路线</view>
						<textarea placeholder="请输入公共交通路线，如附近的地铁站，公交站等。" placeholder-class="placeholderclass" v-model="bus_routes" maxlength="200"></textarea>
					</view>
					<view class="info-item">
						<view>驾车路线</view>
						<textarea placeholder="请输入驾车导航地址，以及附近的停车场信息。" placeholder-class="placeholderclass" v-model="driving_route" maxlength="200"></textarea>
					</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<!-- 已保存 -->
					<view class="define-btn" @tap="setRoutePro()">确认无误并保存</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		data() {
			return {
				pageOpc:0,
				imageList:[],
				uploadList:[],
				imageLength:3,
				bus_routes:"",
				driving_route:"",
				video_url:""
			}
		},
		onLoad() {
			this.getRoute();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			chooseImage: async function() {
				var that = this
				uni.chooseImage({
					count: this.imageLength - this.imageList.length,
					extension:['.jpg','.png','.jpeg'],
					success: (res) => {
						console.log(res)
						for (let i in res.tempFilePaths) {
							var imgFiles = res.tempFilePaths[i]
							let suffix=res.tempFilePaths[i].split('.')[1]
							console.log(suffix)
							if(suffix!='jpg'&&suffix!='png'&&suffix!='jpeg'){
								this.$tools.showToast('图片仅支持jpg、jpeg、png');
								return;
							}
							that.cutImageCallback(imgFiles);
						}
						that.imageList = that.imageList.concat(res.tempFilePaths)
					}
				})
			},
			cutImageCallback(content) {
				let that = this;
				let httpsHead = 'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/'
				that.$tools.loadIng('上传中,请稍后..')
				base.aliyun_upload(content, function(r, err) {
					if (r) {
						let uploadimg = httpsHead + r
						console.log(uploadimg)
						that.uploadList = that.uploadList.concat(uploadimg);
						uni.hideLoading();
					}
				})
			},
			//删除图片
			deleteImage(index) {
				console.log(index)
				this.imageList.splice(index, 1);
				this.uploadList.splice(index, 1);
			},
			deleteVideo(){
				this.video_url=""
			},
			chooseVideo() {
				var that = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						let httpsHead = 'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/'
						that.$tools.loadIng('上传中,请稍后..')
						let video_url = res.tempFilePath
						base.aliyun_upload(video_url, function(r, err) {
							if (r) {
								console.log(httpsHead+r)
								that.video_url = httpsHead+r
								console.log(that.video_url+'?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast')
								uni.hideLoading();
							}
						}, function(res) {
							console.log(res);
						}, 'mp4', 'video/')
					}
				});
			},
			getRoute(){
				this.$request.post(this.$api.getRoute,{
					store_id: uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data.entrance_image){
							this.video_url=data.entrance_image
						}
						if(data.guide_map){
							this.imageList=data.guide_map.split(',')
							this.uploadList = data.guide_map.split(',')
						}
						this.bus_routes=data.bus_routes
						this.driving_route=data.driving_route
					}
				})
			},
			setRoutePro(){				
				this.$request.post(this.$api.setRoutePro,{
					store_id: uni.getStorageSync('store_id'),
					entrance_image:this.video_url,
					guide_map:this.uploadList.join(','),
					bus_routes:this.bus_routes,
					driving_route:this.driving_route
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('修改成功')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 0 36upx;
		padding-bottom: 160rpx;
		.shop-info-box{
			border-top: 1upx solid #36355E;
			.info-item{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;
				textarea{
					background: #1D1C5C;
					border-radius: 16upx;
					padding: 30upx;
					height: 140upx;
					margin-top: 30upx;
					font-size: 28rpx;
				}
				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #9191A7;
				}
				&:nth-last-of-type(1){
					border-bottom: none;
				}
				.icon-more{
					border-color: #FFFFFF;
				}
				.attachment-box{
					margin-top: 30upx;
					.add-btn{
						width: 162rpx;
						height: 162rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1upx solid  #36355E;
						position: relative;
						margin-right: 20upx;
						&::after{
							content: "";
							display: inline-block;
							width: 40upx;
							height: 4upx;
							background: #36355E;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
						}
						&::before{
							content: "";
							display: inline-block;
							width: 4upx;
							height:40upx;
							background: #36355E;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
						}
					}
					.attachment-img{
						width: 162rpx;
						height: 162rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						margin-right: 20upx;
						position: relative;
						:nth-of-type(3n){
							margin-right: 0;
						}
						.close-btn{
							position: absolute;
							top: -10upx;
							right: -10upx;
							width: 40upx;
							height: 40upx;
						}
					}
				}
				.attachment-tips{
					font-size: 24upx;
					margin-top: 20upx;
				}
			}
		}
		.bottom-box{
			height: 150rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			z-index: 999;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
				z-index: 999;
			}
		}
	}
</style>
